<template>
  <div class="login-container">

    <div class="login-text">
      <h2>登录</h2>
    </div>
    <div class="login-box">
      <van-cell-group>
        <van-cell>
          <input class="phoneNumber" type="text" placeholder="手机号" v-model="username">
        </van-cell>
        <van-cell class="password">
          <input class="phoneNumber" type="text" placeholder="密码" v-model="password">
        </van-cell>
      </van-cell-group>
    </div>
    <div class="login-btn" @click="login">
      <p>登录</p>
    </div>
    <div class="login-items">
      <van-checkbox v-model="checked">
        <p>我同意赛事助手  <span class="item">《隐私条款》</span>和 <span class="item">《服务条款》</span></p>
      </van-checkbox>
    </div>
    <div class="wechat-phone">
      <div class="wechat">
        <!-- <van-icon :name=imgSrc size="12vw"/> -->
      </div>
      <div class="phone" @click="sureregister">
        <p>注册</p>
      </div>
    </div>

  </div>
</template>

<script>
import { userLogin, currentUser } from '@/api/user'
import { mapState } from 'vuex'

export default {
  name: 'wo-login',
  data () {
    return {
      mimashow: false,
      text1: '',
      text2: '',
      username: '',
      password: '',
      checked: true,
      imgSrc: require('@/images/serve/wechat/wechat-icon.png')
    }
  },
  computed: {
    ...mapState(['personal_Information'])
  },
  methods: {
    // 注册
    sureregister() {
      this.$router.replace('/Register')
    },
    login () { // 登录
      const obj = { // axios请求携带的用户数据
        username: this.username,
        password: this.password
      }
      userLogin(obj)
        .then(res => {
          const token = res.token // 请求成功保存token
          if (res.message === '登录成功！') {
            window.localStorage.setItem('token', token)// 保存token
          }
          return token
        })
        .then(token => { // 登录成功后获取用户信息
          currentUser(token) // 调用对axios二次封装的登陆请求
            .then(res => { // 将用户信息保存到localStorage中，用于在路由守卫中判断用户的布尔值
              window.localStorage.setItem('user_info', JSON.stringify(res.data))
              window.localStorage.setItem('user', JSON.stringify(res.data.username))
              this.$router.replace('/Carerr') // 路由跳转
            })
            .catch(err => { // 输入错误，将本地以及vuex中保存的数据清空
              console.log(err)
              this.$store.state.personal_Information = ''
            })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .login-text{
    text-align: center;
    /* background-color: antiquewhite; */
    margin-top:15vw ;
  }
  .login-box{
    width: 80%;
    margin: 10vw auto;
    /* background-color: aquamarine; */
    /* border-radius: 5vw; */
  }
  .van-cell{
    height: 10vw;
    /* background-color: antiquewhite; */
    margin-top: 2vw;
    line-height: 10vw;
    border-bottom: 2px solid gainsboro;
  }
 /* ::v-deep .van-cell__value{
    border-radius: 10%;
  } */
  .van-cell input{
    width: 80%;
    border: none;
  }
  .password{
    position: relative;
  }
  .van-cell__value span{
    position: absolute;
    right: 2vw;
    color: rgb(255, 116, 66);
  }
  .login-btn{
    width: 100%;
    height: 12vw;
    /* background-color: aquamarine; */
  }
  .login-btn p{
    height: 100%;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: rgb(255, 116, 66);
    color: white;
    font-size: 5vw;
    line-height: 12vw;
    border-radius: 1.5vw;
  }
  .login-items{
    position: relative;
    width: 80%;
    background-color: antiquewhite;
    font-size: 2vw;
    margin: 3vw auto;
    text-align: center;

  }
  ::v-deep .van-checkbox{
    width: 83%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .item{
    color: rgb(255, 116, 66);
  }
  .wechat-phone{
    position: fixed;
    bottom: 10vw;
    /* background-color: antiquewhite; */
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .phone{
    /* background-color: aquamarine; */
    height: 12vw;
    line-height: 12vw;
    color: rgb(255, 116, 66);
    border-radius: 6vw;
    border: 4px solid rgb(255, 116, 66);
  }
</style>
